<template>
  <ul class="list">
    <li class="item"
        v-for="item of letters"
        :key="item"
        @click="handlerToClick"
        :ref="item"
        @touchstart.prevent="handleTouchStart"
        @touchmove="handleTouchMove"
        @touchend="handleTouchEnd"
    >
      {{item}}
    </li>


  </ul>

</template>

<script>
export default {
  name: "Alphabet",
  props:{
    cities:Object
  },
  data (){
    return {
      touchStatus: false,
      startY: 0,
      timer: null
    }
  },
  updated() {
    var array = this.$refs['A'];

  },
  computed:{
    letters () {
      const letters = []
      for (let i in this.cities) {
        letters.push(i)
      }
      return letters
    }

  },
  methods:{
    handlerToClick(e){
    const ele = e.target.innerText;
    this.$emit('changeInfo',ele)
    },
    handleTouchStart (){
      this.touchStatus = true;
    },

    handleTouchMove (e){
      this.startY = this.$refs['A'][0].offsetTop
      if (this.touchStatus){
        if (this.timer){
          clearTimeout(this.timer)

        }
        this.timer = setTimeout(() => {
        const touchY =  e.touches[0].clientY - 79;
        const index = Math.floor((touchY -  this.startY ) / 20);
        if (index>=0 && index < this.letters.length){
           this.$emit('changeInfo',this.letters[index]);
        }
        },8)

      }

    },
    handleTouchEnd (){
      this.touchStatus = false;
    }
  }


































































}
</script>

<style lang="stylus" scoped>
.list
  display flex
  flex-direction column
  justify-content center
  position absolute
  right 0
  top .58rem
  bottom 0
  width .4rem
  .item
    line-height .4rem
    text-align center
    color #00bcd4

</style>
